<template>
  <div class="edit_img">
    <img :src="imagePath" class="image" ref="image" />
    <van-cell class="edit_btn">
      <div slot="title" @click="$emit('close')">取消</div>
      <div slot="default" @click="handleUpdateImage">完成</div>
    </van-cell>
  </div>
</template>

<script>
import { updateUserPhoto } from "@/request/home";
import { Toast } from "vant";

import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";

export default {
  props: {
    blobObj: {
      type: [Object, FileList],
      requried: true
    }
  },
  data() {
    return {
      imagePath: null
    };
  },
  created() {
    this.imagePath = URL.createObjectURL(this.blobObj[0]);
  },
  mounted() {
    const image = this.$refs.image;
    const cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: "move",
      aspectRatio: 1,
      // autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false
    });
    console.log(cropper);
  },
  methods: {
    async handleUpdateImage() {
      Toast.loading({
        message: "保存中...",
        forbidClick: true
      });
      const FileList = new FormData();
      FileList.photo = FileList;
      await updateUserPhoto(FileList);
      Toast.loading({
        message: "保存成功",
        forbidClick: true
      });
      this.$emit("handlePoptot", this.imagePath);
      this.$emit("close");
    }
  }
};
</script>

<style lang="less" scoped>
.edit_img {
  margin: auto;
  margin-top: 25vh;
  .image {
    display: block;
    max-width: 100%;
  }
  /deep/.van-cell__value {
    color: white;
  }
  .edit_btn {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: black;
    color: white;
  }
}
</style>